<template>
  <div class="container">
    <!-- 顶部导航栏 -->
    <home-head @toSearch="toSearch" @toLogin="toLogin"/>
    <!-- 下拉刷新 -->
    <van-pull-refresh
      v-model="isLoading"
      success-text="刷新成功"
      @refresh="onRefresh"
    >
      <!-- 轮播图 -->
      <van-swipe
        class="my-swipe"
        :autoplay="3000"
        indicator-color="white"
      >
        <van-swipe-item>
          <img
            src="https://image.360kad.com/group1/M00/AE/23/CgAgDmFuFDyAbmBrAAG0wZ_2Pl8810.jpg"
            alt="图片不见惹"
          >
        </van-swipe-item>
        <van-swipe-item>
          <img
            src="https://image.360kad.com/group1/M00/24/47/CgAgDmDZc3WAP9JGAAETi7ZllyE971.jpg"
            alt="图片不见惹"
          >
        </van-swipe-item>
      </van-swipe>
      <!-- 轮播图 -->
      <!-- 宫格导航 -->
      <van-grid
        square
        column-num="5"
        clickable
      >
        <van-grid-item
          v-for="cate in cates"
          :key="cate.id"
          :icon="cate.icon"
          :text="cate.name"
          id="van-grid"
          :to="{path: 'listitem', query: {id:cate.id}}"
        />
      </van-grid>
      <!-- 宫格导航 -->
      <!-- 上拉加载 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        offset="50"
        @load="onLoad"
      >
        <!-- 猜你喜欢 -->
        <items :items="items" @addCart="addItemCarts"/>
        <!-- 猜你喜欢 -->
      </van-list>
      <!-- 上拉加载组件 -->
    </van-pull-refresh>
    <tabbar />
  </div>
</template>

<script>
import Tabbar from '_components/Tabbar.vue'
import HomeHead from './components/HomeHead.vue'
import { fetchCate, fetchItemList, addItemCart } from '../../api/index.js'
import Items from './components/Items'
import { getToken } from '_utils/index.js'

export default {
  name: 'Home',
  data () {
    return {
      // 首页宫格导航
      cates: [],
      // 首页列表
      page: 1,
      pageSize: 5,
      items: [], // 首页列表数据
      isLoading: false, // 下拉刷新
      success_text: '',
      loading: false, // 上拉加载是否触底，触底上拉不在触发load事件，触底会自动变为true，控制每次上拉的状态
      finished: false // 是否已到达最后一页，到达后不再触发load事件
    }
  },
  created () {
    this.fetchCates()
    // this.fetchItemLists()
  },
  methods: {
    // 下拉刷新的回调
    onRefresh () {
      // 重置数据 否则下一次上拉加载无法请求到第一页数据
      this.page = 1
      this.items = []
      this.fetchItemLists()
      // 如果在触底时下拉刷新，需要将上拉加载状态从触底已完成变为false
      this.finished = false
      this.page++
    },
    // 上拉加载回调
    onLoad () {
      this.fetchItemLists()
      this.page++
    },
    // 请求宫格导航数据
    fetchCates () {
      fetchCate().then(res => {
        if (res.data.code === 0) {
          this.cates = res.data.data
          this.cates.push(this.cates[this.cates.length - 1])
        }
      })
    },
    // 请求首页商品数据
    fetchItemLists () {
      fetchItemList({
        categoryId: '72399',
        page: this.page,
        pageSize: this.pageSize
      }).then(res => {
        // 下拉刷新请求完数据后应该将下拉的isLoading状态改为false表示刷新完成
        this.isLoading = false
        // 在下拉刷新触底之后，loading为true，需要手动变为false，否则不触发load事件
        this.loading = false
        if (res.data.code === 0) {
          // 移动端数据为拼接式的，所以不能直接赋值，需要将第二页的数据加到第一页的后面
          this.items = [...this.items, ...res.data.data.result]
        }
        if (res.data.code === 700) {
          // 上拉加载请求数据完成后将finished改为true，表示加载完成
          this.finished = true
        }
      })/* .catch(_err => {
        this.isLoading = false
        this.success_text = '刷新失败'
        this.finished = true
        this.finished_text = '加载失败'
      }) */
    },
    // 点击图标加入购物车
    addItemCarts (id) {
      addItemCart({
        goodsId: id,
        number: 1,
        token: getToken()
      }).then(res => {
        if (res.data.code === 0) {
          this.$toast.success({
            message: '加入购物车成功',
            duration: 1000
          })
          // 提交mutation
          this.$store.commit('cart/change_cart_num', {
            itmes: res.data.data.items,
            number: res.data.data.number
          })
        }
      })
    },
    // 点击搜索框进入搜索页
    toSearch (data) {
      this.$router.push('/search')
    },
    // 点击进入登录页
    toLogin () {
      this.$router.push('/login')
    }
  },
  components: { Tabbar, HomeHead, Items }
}
</script>

<style lang="scss" scoped>
.container {
  padding-bottom: 50px;
}
.my-swipe .van-swipe-item {
  color: #fff;
}
.van-swipe-item img {
  width: 100%;
  height: 3rem;
}
#van-grid {
  ::v-deep .van-grid-item__icon {
    font-size: 35px;
  }
  ::v-deep .van-grid-item__text {
    font-size: 14px;
  }
}
</style>
